<template>
<div class="opacity"  > 
  <el-input clearable   placeholder="请输入内容" v-model="searchValue" class="input-with-select" @keyup.native.13="getComEvents">
    
    <el-button @click="getComEvents" class="ele-color-search"  size="small" slot="append" icon="el-icon-search"></el-button>
  </el-input>

	<div class="choseCity">
		<span	> 省</span><span> 份:</span>
		<el-select clearable class='mg-right'  size='small' v-model="province" slot="prepend" placeholder="请选择">
      <el-option  v-for="(item,index) in cityInfo" :key="index"  :label="item.name" :value="item.id"></el-option>
   </el-select><br />
   <span> 城 </span><span> 市:</span>
	 <el-select clearable size='small' v-model="city" slot="prepend" placeholder="请选择">
      <el-option v-for="(a,index) in cityList"  :key="index" :label="a.name" :value="a.id"></el-option>    
    </el-select>
	</div>
	<ul>
		<li class="comEvents" v-for="item in comEventsList"   @click=" changeAll(item,item.leagueId)" >
			{{item.leagueName}}
		</li>
	</ul>
</div>
</template>

<script>
  export default {
    data() {
      return {
       	searchValue:'',
       
				cityInfo:[	],
				province:'',//省 
				city:'',
				searchValue:'',
				cityList:[],
				comEventsList:[],
				dataUrl:'http://101.37.33.145:3100/weixin/findLeaguesBasic.do'
				
		  }
    },
 
   
	  mounted:function() {
			this.getComEvents();
			this.getCityInfo();
			
			
		},
		methods:{
				getComEvents:function(){
					this.$axios.post(
						this.dataUrl,
						{
							city:this.city,
							province:this.province,
							leagueName:this.searchValue
						}
					).then(
						res=>{this.comEventsList=res.data;this.$emit('ch-events-number',this.comEventsList.length)}
					).catch(err=>{
						console.log(err,'搜索页的错误')
					})
				},
				getCityInfo:function(){
			
					this.$axios.get(
						'http://101.37.33.145:3100/weixin/getLeagueStatic.do'
					).then(
						res=>{this.cityInfo=res.data.provinces}
					).catch(err=>{
						console.log(err,'获取省市静态资源错误')
					})
				},
				changeComId:function(id){
					this.$emit('ch-comId',id)
				},
				changeMainData:function(data){
					this.$emit('ch-mainData',data)
				},
				changeMtk:function(){
					this.$emit('ch-mtk',true)
				},
				
				changeAll:function(data,id){
					
					this.changeMainData(data);
					this.changeComId(id);
					this.changeMtk();
					sessionStorage.navActive='EventOverview';
					this.$router.push('/EventOverview')
				
				}
		},
		watch:{
			province:function(newValue,oldValue){
				
				for(let i=0;i<this.cityInfo.length;i++){
					if(this.cityInfo[i].id==newValue){
						this.cityList=this.cityInfo[i].cities;
						this.city='';
						break;
					}
				}
				
			}
		}

  }
</script>
<style scoped="scoped">
	.comEvents{
		box-sizing: border-box;
		list-style: none;
		width: 100%;
		padding:0 10px;
		color: #666666;
		font-size: 14px;
		line-height: 45px;
		overflow: hidden;
		border-bottom: 1px solid #DCDCDC
	}
	.comEvents:first-of-type{
		margin-top: 10px;
		border-top: 1px solid #DCDCDC;
	}
	ul{
		width: 100%;
		height: 70%;
		padding:0 ;
		margin:20px 0;
		overflow: auto;
	}
	/*滚动条盒子*/
	ul::-webkit-scrollbar{
		
		width: 6px;
		height: 10px;
	}
	/*滚动条外层轨道*/
	ul::-webkit-scrollbar-track{
		background-color: #dcdcdc;
		border-radius:5px ;
	}
	/*按钮*/
	ul::-webkit-scrollbar-button{
		width: 0px;
		height: 0px;
	}
	/*滚动条 内层滑块*/
	ul::-webkit-scrollbar-thumb{
		border-radius: 5px;
		background-color: #77C1C4;
	}

	.comEvents:hover{
		color: #FF7111;
	}


	
	.ele-color-search{
		color: black !important;
		font-size: 20px;
	
	}
	
	
	.mg-right{
		margin-right:10px;
	}
	.opacity{
		height: 100%;
		background-color: white;
		/*overflow: hidden;*/
	}
	.choseCity{
		display:flex ;
		justify-content: space-between;
		align-items: center;
	}
	.choseCity {
		margin-top: 30px;
		font-size: 14px;
	}
	.choseCity>span{
		padding-right: 8px;
		
	}
</style>